<style>
    .table-container {
        background-color: transparent;
        color: white;
        width: 100%;
        height: 270px;
        padding: 30px 20px 20px 0px;
        text-align: left;
        table-layout: fixed;
        border: none;
    }

    .table-container td {
        padding-left: 15px;
        padding-right: 15px;
    }

    .table-container th {
        padding-left: 15px;
    }
</style>
<table class="table-container" rules="none">
    <thead>
        <tr>
            <th>{{'端口' | translate}}</th>
            <th id="th-toggle">{{'开关' | translate}}</th>
            <th>{{'角度' | translate}}</th>
            <!-- <th>编码器</th> -->
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="motor in motors" ng-init="$last && $emit('repeatFinished')" class="active">
            <td>M{{motor.port}}</td>

            <td>
                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-{{motor.port}}">
                    <input type="checkbox" id="switch-{{motor.port}}" class="mdl-switch__input">
                    <span class="mdl-switch__label"></span>
                </label>
            </td>
            <td class="motor-speed">{{motor.angle}}</td>
            <!-- <td class="motor-position">{{motor.position}}</td> -->
        </tr>
    </tbody>
</table>